<template>
  <el-container>
    <el-header style="
        background: linear-gradient(90deg, #1976d2, #1e88e5);
        box-shadow: 0 2px 12px 0 rgba(25, 118, 210, 0.15);
        position: fixed;
        width: 100%;
        z-index: 100;
        top: 0;
        padding: 15px 25px !important;
        height: auto !important;
      ">
      <el-row>
        <el-col :span="12">
          <el-button-group>
            <el-button type="primary" @click="goHome">
              <el-icon>
                <Back />
              </el-icon>回到主页
            </el-button>
          </el-button-group>
        </el-col>

        <el-col :span="12" style="text-align: right">
          <el-button-group>
            <el-popconfirm confirmButtonText="退出" cancelButtonText="取消" icon="el-icon-info" iconColor="red"
              title="确定退出吗" @confirm="logout">
              <template #reference>
                <el-button type="danger">
                  <el-icon>
                    <CircleClose />
                  </el-icon>退出
                </el-button>
              </template>
            </el-popconfirm>
          </el-button-group>
        </el-col>
      </el-row>
    </el-header>
    <el-main style="padding-top: 70px;">
      <div class="manage-container">
        <el-tabs v-model="data.active_name" type="card" class="manage-tabs">
          <Account></Account>
          <NetFilter></NetFilter>
          <LoginAudit></LoginAudit>
          <Connect></Connect>
        </el-tabs>
      </div>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { useGlobalStore } from "@/stores/store";
import Account from "@/components/Account.vue";
import Connect from "@/components/Connect.vue";
import NetFilter from "@/components/NetFilter.vue";
import LoginAudit from "@/components/LoginAudit.vue";
import { Back, CircleClose } from "@element-plus/icons-vue";

let router = useRouter();
let globalStore = useGlobalStore();

let data = reactive({
  active_name: "accoutManage",
});

/**
 * 回到主页
 */
function goHome() {
  router.push({ name: "Home" })
}

/**
 * 退出登陆
 */
function logout() {
  globalStore.logout();
  router.push({ "name": "Login" });
}

</script>

<style scoped>
.el-header {
  background: linear-gradient(90deg, #1976d2, #1e88e5);
  box-shadow: 0 2px 12px 0 rgba(25, 118, 210, 0.15);
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0;
  padding: 15px 25px !important;
  height: auto !important;
}

.el-button-group {
  margin-right: 15px;
  display: inline-flex;
  gap: 8px;
}

.el-button-group .el-button {
  border-radius: 8px !important;
  margin: 0 !important;
}

.el-button {
  transition: all 0.3s ease;
  border: none;
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
  border-radius: 8px;
}

.el-button[type="primary"] {
  background: linear-gradient(45deg, #1976d2, #64b5f6);
  border: none;
  color: white;
}

.el-button[type="primary"]:hover {
  background: linear-gradient(45deg, #1565c0, #42a5f5);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px 0 rgba(25, 118, 210, 0.25);
}

.el-button[type="danger"] {
  background: linear-gradient(45deg, #d32f2f, #ef5350);
  border: none;
  color: white;
}

.el-button[type="danger"]:hover {
  background: linear-gradient(45deg, #c62828, #e53935);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px 0 rgba(220, 0, 0, 0.25);
}

.manage-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(25, 118, 210, 0.08);
  margin: 0 auto;
  padding: 20px;
}

.manage-tabs :deep(.el-tabs__header) {
  margin-bottom: 20px;
  background: #f5f7fa;
  padding: 8px 20px 0;
  border-radius: 8px;
}

.manage-tabs :deep(.el-tabs__nav) {
  border: none !important;
}

.manage-tabs :deep(.el-tabs__item) {
  height: 40px !important;
  line-height: 40px !important;
  font-size: 14px;
  color: #606266;
  border: 1px solid #e4e7ed !important;
  margin-right: 8px;
  border-radius: 8px !important;
  background: #fff;
  transition: all 0.3s ease;
  padding: 0 25px !important;
}

.manage-tabs :deep(.el-tabs__item:hover) {
  color: #1976d2;
  background: #f8fafd;
}

.manage-tabs :deep(.el-tabs__item.is-active) {
  color: #1976d2;
  background: #fff;
  border-color: #1976d2 !important;
  font-weight: 500;
}

.manage-tabs :deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(25, 118, 210, 0.08);
}

.manage-tabs :deep(.el-table__header) {
  background: linear-gradient(45deg, #1976d2, #64b5f6);
}

.manage-tabs :deep(.el-table__header th) {
  background: transparent;
  color: #ffffff;
  font-weight: 500;
}

.manage-tabs :deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
  background: rgba(25, 118, 210, 0.05);
}

.manage-tabs :deep(.el-button) {
  transition: all 0.3s ease;
}

.manage-tabs :deep(.el-button:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px 0 rgba(25, 118, 210, 0.25);
}

.manage-tabs :deep(.el-card) {
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(25, 118, 210, 0.08);
}

.manage-tabs :deep(.el-dialog) {
  border-radius: 15px;
}

.manage-tabs :deep(.el-dialog__header) {
  background: linear-gradient(45deg, #1976d2, #64b5f6);
  padding: 20px;
  margin-right: 0;
}

.manage-tabs :deep(.el-dialog__title) {
  color: #ffffff;
  font-weight: 500;
}

.manage-tabs :deep(.el-form-item) {
  margin-bottom: 22px;
}

.manage-tabs :deep(.el-input__wrapper),
.manage-tabs :deep(.el-textarea__wrapper) {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.manage-tabs :deep(.el-input__wrapper:hover),
.manage-tabs :deep(.el-textarea__wrapper:hover) {
  box-shadow: 0 2px 12px 0 rgba(25, 118, 210, 0.1);
}

@media (max-width: 768px) {
  .el-header {
    padding: 8px 10px !important;
  }

  .el-button-group {
    margin-right: 5px;
  }

  .el-button {
    padding: 8px 15px;
  }

  .manage-container {
    padding: 10px;
  }

  .manage-tabs :deep(.el-tabs__item) {
    padding: 0 15px !important;
  }
}
</style>

border-radius: 8px;
transition: all 0.3s ease;
}
